<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 移动端过度到pc端，使用min-width实现，并且数值从小到大书写 */
      @media screen and (min-width: 600px) {
        div {
          background-color: blueviolet;
        }
      }
      @media screen and (min-width: 800px) {
        div {
          background-color: red;
        }
      }
      /* pc端过渡到移动端，使用max-width实现，并且数值从大到小书写 */
      @media screen and (max-width: 1000px) {
        div {
          background-color: red;
        }
      }
      @media screen and (max-width: 900px) {
        div {
          background-color: green;
        }
      }
      /*
        媒体查询
        1 媒体类型
          all：应用于所有
          srceen：应用于屏幕
          print: 打印预览模式
          speech: 用于语音合成器
        2 媒体特性
          min-width
          min-height
          ...
        3 逻辑符操作符
          and
          not
          ,: 表示或的关系，只要有一个成立即可
        4 link标签使用媒体查询
      */
      div {
        width: 100px;
        height: 100px;
      }

      /* @media screen and (min-width: 700px), (max-width: 200px) {
        div {
          background-color: red;
        }
      }
      @media print {
        div {
          background-color: blueviolet;
          font-size: 30px;
        }
      } */
    </style>
    <!-- <link rel="stylesheet" href="./index.css" media="(min-width: 400px)" /> -->
  </head>
  <body>
    <div>dads</div>
  </body>
</html>
